<template>
  <!-- <section>：是一个语义化的元素，用于表示文档中的一个独立部分，它通常包含一个主题或内容块 -->
  <div class="layout-main">
    <!-- 关于 router-view 路由插槽的使用，请参考 vue-router 官方文档：https://router.vuejs.org/zh/guide/advanced/router-view-slot.html -->
    <router-view v-slot="{ Component, route }">
      <el-scrollbar
          class="main-scrollbar"
          noresize

          :view-style="{
                display: 'flex',
                flex: 'auto',
                overflow: 'hidden',
                'flex-direction': 'column'
              }"
      >
        <div class="h-full">
          <!-- 路由页面切换动画过渡效果，默认使用 slide-fade 动画过渡，可自定义动画过渡效果 -->
          <!--
          || 是 JavaScript 中的逻辑或运算符。这个运算符的作用是返回两个操作数中的第一个 “真值”
          let title;

          // 如果 to.meta.title 未定义或为空字符串
          title = undefined || '默认标题'; // 结果是 '默认标题'
          title = '' || '默认标题'; // 结果也是 '默认标题'

          // 如果 to.meta.title 有值
          title = '主页' || '默认标题'; // 结果是 '主页'
        -->
          <!-- 关于路由过度动效的使用，请参考 vue-router 官方文档： https://router.vuejs.org/zh/guide/advanced/transitions.html -->
          <transition :name="route.meta.transition || 'square-in-center'" mode="out-in" appear>
            <keep-alive v-if="main.isKeepAlive" :max="10">
              <component
                  :is="Component"
                  :key="route.path"
              />
            </keep-alive>
            <component
                v-else
                :is="Component"
                :key="route.path"
            />
          </transition>
        </div>
      </el-scrollbar>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";

// 获取 layouts 状态
const layouts = useLayouts();
const { main } = storeToRefs(layouts);

watch(() => main.value.showPadding, (newValue) => {
  console.log("main.showPadding changed to: " + newValue)
  if (newValue) {
    document.querySelector('.layout-main').style.padding = '20px'
  } else {
    document.querySelector('.layout-main').style.padding = '0'
  }
})
</script>

<style scoped lang="scss">
.layout-main {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-x: hidden;
  transition: padding 0.5s ease-in-out;

  .main-scrollbar > .el-scrollbar__bar {
    //display: none;
  }
}

// 滚动条样式清除
:deep(.el-scrollbar__bar) {
  //display: none;
  //background-color: #c1e7e2;//这里我设置成了透明色,可以根据需求添加自己想要的颜色
  //overflow-x: hidden;
}
</style>